// components/actionSheet/actionSheet.js
Component({
  properties: {
    showActionsheet: {
      type: Boolean,
      value: false
    },
    list:{
      type: Array,
      value: []
    },
    title:{
      type: String,
      value: ''
    }
  },
  
  data: {
    animate:{},
    hideModal:false,
  }, // 私有数据，可用于模板渲染
  observers: {
    'showActionsheet': function(val) {
      if (val) {
        this.showModal()
      } else {
        this.hideModal()
      }
    }
  },
  methods: {
     // 显示遮罩层
     showModal() {
      this.setData({
        hideModal: true
      })
      const animation = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease',
      })
      // 先显示背景再执行动画，translateY(0)偏移量为0代表显示默认高度
      setTimeout(() => {
        animation.translateY(0).step()
        this.setData({
          animate: animation.export()
        })
      }, 50)
    },
    // 隐藏遮罩层
    hideModal() {
      const animation = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease',
      })
      // 设置为100vh可以确保滚动到底部，可以按照自己的内容高度设置，能够滑到底部即可
      animation.translateY('100vh').step()
      this.setData({
        animate: animation.export(),
      })
      // 先执行动画，再隐藏组件
      setTimeout(() => {
        this.setData({
          hideModal: false
        })
      }, 300)
    },
    cancel(){
      this.setData({
        showActionsheet: false
      })
    },
 
    handClick(e) {
      this.triggerEvent('select', e.currentTarget.dataset.idx);
    }
  }
})
